<template>
    <div class="tinymce-editor">
        <editor
            v-model="myValue"
            :init="init"
            :disabled="isDisabled"
            @onClick="onClick"
        ></editor>
    </div>
</template>
<script>
import OSS from 'ali-oss'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/fullscreen' // 全屏
import 'tinymce/plugins/preview' // 预览
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/icons/default/icons.min.js'
// import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
// import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/link'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/code'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/print'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
    components: {
        Editor
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        isLoad: {
            type: Boolean,
            default: false
        },
        height: {
            type: Number,
            default: 400
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default: 'lists image media table '
        },
        toolbar: {
            type: [String, Array],
            default: () => []
        }
    },
    data () {
        return {
            isDisabled: false,
            init: {
                language_url: 'static/zh_CN.js', // public目录下
                language: 'zh_CN',
                skin_url: 'static/skins/ui/oxide', // public目录下
                height: this.height,
                paste_retain_style_properties: 'all',
                paste_word_valid_elements: '*[*]', // word需要它
                paste_data_images: false,
                paste_convert_word_fake_lists: false, // 插入word文档需要该属性
                paste_webkit_styles: 'all',
                paste_merge_formats: true,
                nonbreaking_force_tab: false,
                font_formats: `
                    微软雅黑=微软雅黑
                    宋体=宋体
                    黑体=黑体
                    仿宋=仿宋
                    楷体=楷体
                    隶书=隶书
                    幼圆=幼圆
                    Andale Mono=andale mono,times
                    Arial=arial, helvetica,
                    sans-serif
                    Arial Black=arial black, avant garde
                    Book Antiqua=book antiqua,palatino
                    Comic Sans MS=comic sans ms,sans-serif
                    Courier New=courier new,courier
                    Georgia=georgia,palatino
                    Helvetica=helvetica
                    Impact=impact,chicago
                    Symbol=symbol
                    Tahoma=tahoma,arial,helvetica,sans-serif
                    Terminal=terminal,monaco
                    Times New Roman=times new roman,times
                    Trebuchet MS=trebuchet ms,geneva
                    Verdana=verdana,geneva
                    Webdings=webdings
                    Wingdings=wingdings,zapf dingbats`,
                paste_auto_cleanup_on_paste: false,
                custom_undo_redo_levels: 10,
                plugins:
                    'lists image preview  table  print code  nonbreaking insertdatetime  searchreplace  pagebreak link charmap paste fullscreen  ',
                toolbar: [
                    'bold forecolor backcolor | alignleft aligncenter alignright alignjustify  lists image  table  | bullist numlist outdent indent |  preview fullscreen ',
                    ''
                ],
                // images_upload_url: `${this.$config.file}${this.$api.upload}`, // 上传路径
                images_upload_handler: (blobInfo, success, failure) => {
                    this.fnUploadRequest(blobInfo, success, failure)
                }
            },
            myValue: this.value
        }
    },
    created () {
        console.log('xia')
        // console.log(this.$config)
        tinymce.init({})
    },
    methods: {
        async getOssParms () {
            let params = {
                params: {}
            }
            let ret = await this.$http
                .get(
                    this.$store.state.IP +
                    '/oss/getAuthorizationInfo?path=skinPackage',
                    params
                )
            return ret.body.data
        },
        async fnUploadRequest (blobInfo, success, failure) {
            try {
                let vm = this
                // 获取OSS配置信息
                let val = await vm.getOssParms()
                let filename = val.path + '/' + Date.parse(new Date()) + '.zip'
                let client = new OSS({
                    region: val.region,
                    accessKeyId: val.accessKeyId,
                    accessKeySecret: val.accessKeySecret,
                    secure: false,
                    bucket: val.bucket,
                    stsToken: val.securityToken
                })
                let ret = await client.multipartUpload(filename, blobInfo.blob())
                if (ret.res.statusCode === 200) {
                    success(ret.res.requestUrls[0])
                }
            } catch (error) {
                console.error(error)
                this.$error(error.message)
            }
        },
        onClick (e) {
            this.$emit('onClick', e, tinymce)
        }
    },
    watch: {
        value (newValue) {
            this.myValue = newValue
        },
        isLoad (val) {
            if (val) {
                tinymce.init({})
            }
        },
        disabled (val) {
            this.isDisabled = val
        },
        myValue (newValue) {
            this.$emit('input', newValue)
        }
    }
}
</script>
<style>
.tox-silver-sink {
    z-index: 3000 !important;
}
.tox .tox-statusbar {
    display: none !important;
}
</style>
